<template>
  <view class="content">
	
	<!-- 轮播图 -->
	<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
	  <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
		<swiper-item v-for="(item, index) in data" :key="index">
		  <view class="swiper-item" @click="clickBannerItem(item)">
			<image :src="item.image" mode="aspectFill" :draggable="false" />
		  </view>
		</swiper-item>
	  </swiper>
	</uni-swiper-dot>  
	
	<uni-row class="demo-uni-row">
		<uni-col :span="14">
			<uni-search-bar v-model="queryParams.name" class="uni-mt-10" radius="5" placeholder="请输入姓名进行查询" clearButton="auto" cancelButton="none" @confirm="clickQuery" />
		</uni-col>
		<uni-col :span="5" style="text-align: right;padding-top: 10px;">
			<button class="mini-btn" type="primary" plain="true" @click="clickQuery()" size="mini">查询</button>
		</uni-col>
		<uni-col :span="5" style="text-align: right;padding-top: 10px;">
			<button class="mini-btn" type="primary" plain="true" @click="add()" size="mini">新增</button>
		</uni-col>
	</uni-row>
	
    <uni-list>
		<template v-for="(item, index) in patientList">
			<uni-list-item :title="'姓名：'+item.name" :note="'住院号：'+item.admissionNumber"
				:rightText="item.nickName"
				link :to="getToEdit(item.patientId,item.createBy)"
				@click="onItemClick($event,item.patientId)">
			</uni-list-item>
		</template>
    </uni-list>
	
	<uni-pagination @change="pageChange" style="margin-top: 5px;" :total="total" title="分页" />
	
  </view>
</template>

<script>
	import storage from '@/utils/storage'
  import { listPatient } from "@/api/trms/trms"
  export default {
	data() {
		return {
			queryParams: {
			  pageNum: 1,
			  pageSize: 10,
			  name: null
			},
			patientList: [],
			total: 0,
			current: 0,
			swiperDotIndex: 0,
			data: [{
				image: '/static/images/banner/b0001.png'
			  },
			  {
				image: '/static/images/banner/b0002.png'
			  },
			  {
				image: '/static/images/banner/b0003.png'
			  }
			]
		}
	},
    onLoad: function() {
		this.czQuery();
		this.getListPage();
    },
	created(){
			
	},
	methods: {
		getToEdit(patientId,userId){
			return '/pages/trms/work?id='+patientId+'&userId='+userId;
		},
		clickBannerItem(item) {
			console.info(item)
		},
		changeSwiper(e) {
			this.current = e.detail.current
		},
		onItemClick(e,id){
			console.log(id)
		},
		/**
		 * 跳转到添加页面
		 */
		add(){
			let that = this;
			uni.navigateTo({
				url: '/pages/trms/patient/edit',
				events: {
				    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				    listPageData: function(data) {
					  if(data && data.data == 'refPage'){
						  // 重新查询
						  that.clickQuery();
					  }
				    }
				  },
				  success: function(res) {
				    // 通过eventChannel向被打开页面传送数据
				    res.eventChannel.emit('listPageData', { data: 'data from starter page' })
				  }
			});
		},
		/**
		 * 重置查询表单
		 */
		czQuery(){
			this.queryParams = {
			  pageNum: 1,
			  pageSize: 10,
			  name: null
			}
		},
		/**
		 * 点击查询
		 */
		clickQuery(){
			this.queryParams.pageNum = 1 ;
			this.queryParams.pageSize = 10 ;
			this.getListPage();
		},
		/**
		 * 获取分页数据
		 */
		getListPage(){
			listPatient(this.queryParams).then(r => {
				if(r.code != 200){
					this.$modal.msgError(r.msg);
					if(this.queryParams.pageNum != 1){
						this.queryParams.pageNum = 1;
					}
					this.total = 0;
					this.patientList = [];
					return;
				}
				this.total = r.total;
				this.patientList = r.rows;
			});
		},
		/**
		 * 下一页
		 */
		pageChange(e){
			console.log(e)
			let type = e.type;
			let current = e.current;
			if(type == 'next'){
				this.queryParams.pageNum = current + 1 ;
			}else{
				this.queryParams.pageNum = current - 1 ;
			}
			this.getListPage();
		}
	}
  }
</script>

<style>
  .content {
    padding: 10px;
  }
  .content .demo-uni-row {
	  margin-top: 10px;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  padding-left: 10px;
	  padding-right: 10px;
	  margin-bottom: 10px;
	  background-color: #FFFFFF;
  }
  .content .demo-uni-row .mini-btn {
	  padding-top: 2px;
	  padding-bottom: 2px;
  }
.swiper {
  height: 300rpx;
}

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 300rpx;
  line-height: 300rpx;
}

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
	width: 400px;
	/* #ifndef APP-NVUE */
	margin: 0 auto;
	/* #endif */
	margin-top: 8px;
  }

  .image {
	width: 100%;
  }
}
</style>
